<template>
  <div>
    <!-- 列表渲染指令 v-for -->

    <!-- <div v-for="(item, index) in list" :key="index">
      <p>索引：{{ index }}---课程：{{ item }}</p>
    </div>
    <div v-for="(item, index) in list2" :key="index">
      <p>索引：{{ index }}-{{ item.id }}--课程：{{ item.message }}</p>
    </div> -->
    <!-- 列表渲染指令 v-for -->
    <table>
      <tr>
        <th>id</th>
        <th>username</th>
        <th>age</th>
        <th>sex</th>
      </tr>
      <tr v-for=" ">
        <td>{{ user.id }}</td>
        <td>{{ user.username }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.sex }}</td>
      </tr>
    </table>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";

// const list = ref(["html", "css", "javascript", "vue", "hm"]);
// const list2 = reactive([
//   { id: 1, message: "梅1" },
//   { id: 2, message: "梅2" },
//   { id: 3, message: "梅3" },
//   { id: 4, message: "梅4" },
//   { id: 5, message: "梅5" },
// ]);
const user = reactive({ id: 1, username: "张三", age: 18, sex: "男" });
</script>
